<template>
    <div>
        <yh-dialog
            title="高级查询"
            :visible.sync="visibleTemp"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="800px"
            drag
            @close="closeModal"
        >
            <el-form id="header-query" label-width="120px" style="width: 100%" ref="operationSearchParam" :model="operationSearchParam">
                <el-form-item label="事件状态" prop="eventStatusList">
                    <el-select v-model="operationSearchParam.eventStatusList" filterable clearable collapse-tags multiple size="mini">
                        <el-option v-for="(value, key) in eventStatusPojo" :key="key" :value="key" :label="value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="超限事件分布" prop="adjustProgerss">
                    <el-select v-model="operationSearchParam.adjustProgerss" filterable clearable collapse-tags multiple size="mini">
                        <el-option v-for="(value, key) in adjustProgerssPojo" :key="key" :value="key" :label="value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="当前指标状态" prop="triggerType">
                    <el-select v-model="operationSearchParam.triggerType" filterable clearable collapse-tags multiple size="mini">
                        <el-option v-for="(value, key) in triggerTypePojo" :key="key" :value="key" :label="value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否偏严" prop="strict" v-if="$attrs.type == 'transfinite-detail'">
                    <el-select v-model="operationSearchParam.strict" filterable clearable size="mini">
                        <el-option v-for="(value, key) in strictPojo" :key="key" :value="key" :label="value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="产品代码/名称" prop="fundCode">
                    <el-select v-model="operationSearchParam.fundCode" filterable multiple collapse-tags clearable size="mini">
                        <el-option
                            v-for="i in computedFundStorage"
                            :key="i.fundProductCode"
                            :label="i.fundProductCode + ' ' + i.fundName"
                            :value="i.fundProductCode"
                        >
                        </el-option>
                    </el-select>
                    <!-- <RiskEntryInputs
                        @set-entry-data="val => (operationSearchParam.fundCode = val)"
                        :showDis="false"
                        :showAll="false"
                        :returnDatas="operationSearchParam.fundCode"
                        dictKey="fundProductCode"
                        :disabled="type == 'look'"
                        style="width:100%"
                    /> -->
                </el-form-item>
                <el-form-item label="产品类型" prop="fundType" v-if="$attrs.type == 'transfinite-detail'">
                    <el-select v-model="operationSearchParam.fundType" filterable clearable size="mini">
                        <el-option v-for="(value, key) in fundTypePojo" :key="key" :value="key" :label="value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="投资经理" prop="investmentManager">
                    <el-select v-model="operationSearchParam.investmentManager" filterable size="mini" clearable multiple collapse-tags>
                        <el-option v-for="item in computedInvestManagerList" :key="item.name" :label="item.name" :value="item.name"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发起日期" prop="approveDate" v-if="$attrs.type != 'manual'">
                    <el-date-picker
                        v-model="operationSearchParam.approveDate"
                        type="date"
                        size="mini"
                        style="width: 100%"
                        value-format="yyyyMMdd"
                        format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="估值日期" prop="tradeDate">
                    <el-date-picker
                        v-model="operationSearchParam.tradeDate"
                        type="date"
                        size="mini"
                        style="width: 100%"
                        value-format="yyyyMMdd"
                        format="yyyy-MM-dd"
                    >
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="条目编号" prop="entryCode" v-if="$attrs.type != 'manual'">
                    <el-input size="mini" v-model="operationSearchParam.entryCode" clearable></el-input>
                </el-form-item>
                <el-form-item label="连续超限天数" prop="prohibitionDate">
                    <!-- 方向选择 -->
                    <el-select v-model="operationSearchParam.prohibitionDateUnit" filterable clearable size="mini" style="width: 40%">
                        <el-option v-for="(value, key) in compareTypePojo" :key="key" :value="key" :label="value"> </el-option>
                    </el-select>
                    <el-input
                        size="mini"
                        v-model="operationSearchParam.prohibitionDate"
                        style="width: calc(60% - 10px); margin-left: 10px"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="系统配置条目" prop="entryName" v-if="$attrs.type != 'manual'">
                    <el-input size="mini" v-model="operationSearchParam.entryName" clearable></el-input>
                </el-form-item>
                <el-form-item label="主办人" prop="sponsor" v-if="$attrs.type != 'manual'">
                    <RiskEntryInputPlus
                        :requestParams="{
                            url: '/outFrame/userInfo/list/like?userCodeAndName=',
                            method: 'get',
                        }"
                        :info="{
                            key: 'userCode',
                            name: 'userNickName',
                        }"
                        @set-entry-data="value => (operationSearchParam.sponsor = value)"
                        :returnDatas="operationSearchParam.sponsor"
                    />
                </el-form-item>
                <el-form-item label="事件来源" prop="articeInfo" v-if="$attrs.type == 'manual'">
                    <el-input size="mini" v-model="operationSearchParam.articeInfo" clearable></el-input>
                </el-form-item>
                <el-form-item label="反馈情况" prop="feedbackStatus">
                    <el-select v-model="operationSearchParam.feedbackStatus" filterable clearable size="mini">
                        <el-option v-for="(value, key) in feedbackStatusPojo" :key="key" :value="key" :label="value"> </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click="handleReset"> 重 置 </el-button>
                <el-button size="mini" @click="handleButton('primary-search-cancel')"> 取 消 </el-button>
                <el-button size="mini" type="primary" @click="handleButton('primary-search-confirm')"> 确 定 </el-button>
            </div>
        </yh-dialog>
    </div>
</template>
<script lang="ts">
import RiskEntryInputPlus from '@/common/components/risk-entry-input-plus.vue';
import RiskEntryInputs from '@/common/components/risk-entry-inputs.vue';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { TransfiniteIndicatorDetailDTO } from '../../vo/transfinite-Indicator';
import Dict from '../../dict/index';
import { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions } from '@/utils/tools';
@Component({ name: 'TransfinitePrimarySearch', components: { RiskEntryInputs, RiskEntryInputPlus } })
export default class TransfinitePrimarySearch extends Vue {
    @Prop() searchParam: TransfiniteIndicatorDetailDTO;
    @Prop() visible: boolean;
    visibleTemp: boolean = false;
    @Watch('visible', { immediate: true })
    changeVisible() {
        if (this.visible) {
            this.visibleTemp = this.visible;
            console.log(this.searchParam, 'searchParam+++++++++++++++++++++++++++++++++==');
            this.operationSearchParam = JSON.parse(JSON.stringify(this.searchParam));
            // this.$attrs.type == 'strict' && delete this.eventStatusPojo['2'];
        }
    }
    Dict = new Dict();
    eventStatusPojo = JSON.parse(JSON.stringify(Dict.eventStatusPojo));
    adjustProgerssPojo = Dict.adjustProgerssPojo;
    triggerTypePojo = Dict.triggerTypePojo;
    strictPojo = Dict.strictPojo;
    compareTypePojo = Dict.compareTypePojo;
    feedbackStatusPojo = Dict.feedbackStatusPojo;
    fundTypePojo = Dict.fundTypePojo;
    operationSearchParam: TransfiniteIndicatorDetailDTO = {
        eventStatusList: [],
        triggerType: [],
        adjustProgerss: [],
        fundCode: [],
        investmentManager: [],
        approveDate: '',
        tradeDate: '',
        entryCode: '',
        entryName: '',
        prohibitionDateUnit: '',
        prohibitionDate: '',
        feedbackStatus: '',
        sponsor: '',
        articeInfo: '',
        fundType: '',
    };

    fundStorage: any[] = [];
    investManagerList: any[] = [];
    investManagerListTemp: any[] = [];

    // 已选项前置
    get computedFundStorage() {
        let arr = changeOptions(this.operationSearchParam.fundCode, this.fundStorage, 'fundProductCode');
        return arr;
    }

    // 已选项前置
    get computedInvestManagerList() {
        let arr = changeOptions(this.operationSearchParam.investmentManager, this.investManagerListTemp, 'name');
        return arr;
    }

    async mounted() {
        this.fundStorage = await SGU_CACHE('FundInfoByUser', '/fundInfo/list/byUser/like', []);
        this.getInvestManagerList();
    }

    closeModal() {
        this.handleButton('primary-search-cancel');
    }

    handleButton(type: string) {
        this.visibleTemp = false;
        this.operationSearchParam.name = '';
        this.$emit('handleButton', { type, params: this.operationSearchParam });
        // if (type == 'primary-search-confirm') {
        //     // TODO x改动父组件值
        //     this.searchParam = JSON.parse(JSON.stringify(this.operationSearchParam));
        // }
    }

    /**
     * 重置 按钮事件
     */
    handleReset(): void {
        this.operationSearchParam = {
            eventStatusList: [],
            triggerType: [],
            adjustProgerss: [],
            fundCode: [],
            investmentManager: [],
            approveDate: '',
            tradeDate: '',
            entryCode: '',
            entryName: '',
            prohibitionDateUnit: '',
            prohibitionDate: '',
            feedbackStatus: '',
            sponsor: '',
            articeInfo: '',
            fundType: '',
        };
    }

    /**
     * 下拉数据
     */
    getInvestManagerList() {
        this.$axios
            .get('/middle/investManager/List')
            .then((res: any) => {
                this.investManagerList = res;
                this.investManagerListTemp = res.map(ele => {
                    return { name: ele };
                });
            })
            .catch(() => {});
    }
}
</script>
<style lang="scss" scoped>
#header-query {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 10px;
}
/deep/ .el-form {
    .el-form-item {
        margin-bottom: 10px !important;
    }
}
/deep/ .el-select {
    width: 100%;
}

/deep/ .el-select__tags {
    flex-wrap: nowrap;

    .el-tag.el-tag--info {
        display: flex;
        align-items: center;

        .el-select__tags-text {
            display: block;
            font-size: 12px;
            max-width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
